<template>
	<view class="page">
		<view class="title">
			5.9.showLoading加载和showModal模态框示例
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://uniapp.dcloud.net.cn/api/ui/prompt.html" text="交互反馈" color="#007BFF"></uni-link>
		</view>
		<view class="p">
			showLoading
		</view>
		<view class="p flex center">
			<button @click="showmodal">showModal</button>
		</view>
		<view class="p" v-if="delcontent">
			我是需要被删除的内容
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	uni.showLoading({
		title: "加载中",
		mask: true
	})

	setTimeout(() => {
		uni.hideLoading()
	}, 1000)

	const delcontent = ref(true)

	const showmodal = () => {
		uni.showModal({
			title: "是否删除",
			placeholderText: "请输入 '确认删除' 以确认删除以下内容",
			cancelText: "不删除",
			confirmText: "确定删除你了",
			editable: true, // 开启输入框
			success: (res) => {
				// 获取用户输入的内容
				const inputValue = res.content;
				// if (res.confirm) {
				// 	delcontent.value = false
				// } else if (res.cancel) {
				// 	uni.showToast({
				// 		title: "用户点击了取消",
				// 		icon: "none"
				// 	})
				// }
				if (res.confirm) {
					// 获取用户输入的内容
					const inputValue = res.content;
					if (inputValue === '确认删除') {
						// 用户输入正确，执行删除操作
						delcontent.value = false;
						uni.showToast({
							title: "内容已删除",
							icon: 'success'
						});
					} else {
						// 用户输入错误，提示重新操作
						uni.showToast({
							title: "输入错误，请重新操作",
							icon: 'none'
						});
					}
				} else if (res.cancel) {
					// 用户点击取消
					uni.showToast({
						title: "用户点击了取消",
						icon: 'none'
					});
				}
			}
		})
	}
</script>

<style lang="scss" scoped>

</style>